<template>
    <div>
        <div class="container">
            <div class="tableBar">
                <label style="margin-right: 5px;">
                    用户名：
                </label>
                <el-input v-model="username" placeholder="请输入用户名" style="width: 15%"></el-input>
                <el-button type="primary" style="margin-left: 5px;" @click="handlePageSelect()">查询</el-button>
                <el-button type="primary" style="float: right" @click="addUser()">+用户注册</el-button>

            </div>

            <template>
                <el-table :data="tableData" stripe style="width: 100%">
                    <el-table-column prop="username" label="用户名">
                    </el-table-column>

                    <el-table-column prop="avatar" label="头像">
                        <template slot-scope="scope">
                            <el-image style="width: 80px; height: 80px; border: none;" :src=scope.row.avatar></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column label="密码">
                        {{ Md5password }}
                    </el-table-column>
                    <el-table-column prop="sex" label="性别" width="180">
                        <template slot-scope="scope">
                            {{ scope.row.sex === "1" ? '男' : '女' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="phoneNum" label="手机号">
                    </el-table-column>
                    <el-table-column prop="email" label="邮箱">
                    </el-table-column>
                    <el-table-column prop="birth" label="生日">
                    </el-table-column>
                    <el-table-column prop="introduction" label="介绍">
                    </el-table-column>
                    <el-table-column prop="location" label="地址">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope" >
                            <el-button type="text" @click="deleteUser(scope.row.id)">删除用户</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </div>
    </div>
</template>

<script>
import { PageQuery, DeleteUser } from '@/api/consumer'

export default {
    data() {
        return {
            username: '',
            Md5password: '********',
            tableData: []
        }
    },
    created() {
        this.handlePageSelect();
    },
    methods: {
        //分页查询
        handlePageSelect() {
            const data = { username: this.username }
            PageQuery(data).then((res) => {
                if (res.data.code === 1) {
                    this.tableData = res.data.data.tableData
                }
            }).catch((error) => {
                this.$message.error('请求出错了')
            })
        },
        addUser() {
            this.$router.push('/addConsumer')
        },
        deleteUser(id) {
            this.$confirm('此操作将永久删除该歌曲, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                DeleteUser(id).then((res) => {
                    if (res.data.code === 1) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.handlePageSelect()
                    } else {
                        this.$message.error(res.data.msg)
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
            
        }

    }
}
</script>

<style></style>